<template>
	<view>
		<uni-titles :title="title"></uni-titles>
		<uni-tudwhere></uni-tudwhere>
		<uni-onlytitlelist :title="'土地信息'">
			<view class="tudbox">
				<view class="item fs-24" :class="{ w100: index > 3 }" v-for="(d, index) in tdData" :key="d.name">
					<view class="name">{{ d.name }}</view>
					<view class="mar-left20" :class="'type' + index">{{ d.value }}</view>
				</view>
			</view>
		</uni-onlytitlelist>
		<uni-propelling :propellingdata="data"></uni-propelling>
		<uni-menu :list="menulist" @mchange="mchange"></uni-menu>
		<template v-if="menuact == 0">
			<uni-onlytitlelist :title="'空气状态'" :lefticon="kqztIcon">
				<view class="kongqbox">
					<view class="titlecontent fs-24">
						<view>实际参数</view>
						<view class="rightText">模型参数</view>
					</view>
					<view class="item fs-24" v-for="(d, index) in kqData" :key="d.name">
						<view class="leftcontent">
							<view class="name">{{ d.name }}</view>
							<view class="mar-left20">
								{{ d.sj }}
								<text v-if="parseFloat(d.sj) > 70 && index < 2" class="toparrow mar-left10 fs-28">↑</text>
								<text v-else-if="parseFloat(d.sj) < 15 && index < 2" class="bottomarrow mar-left10 fs-28">↓</text>
							</view>
						</view>
						<view class="rightms">{{ d.ms }}</view>
					</view>
				</view>
			</uni-onlytitlelist>
			<uni-onlytitlelist :title="'土壤状态'" :lefticon="kqztIcon">
				<view class="kongqbox">
					<view class="titlecontent fs-24">
						<view>实际参数</view>
						<view class="rightText">模型参数</view>
					</view>
					<view class="item fs-24" v-for="(d, index) in trData" :key="d.name">
						<view class="leftcontent">
							<view class="name">{{ d.name }}</view>
							<view class="mar-left20">
								{{ d.sj }}
								<text v-if="parseFloat(d.sj) > 70 && index < 2" class="toparrow mar-left10 fs-28">↑</text>
								<text v-else-if="parseFloat(d.sj) < 15 && index < 2" class="bottomarrow mar-left10 fs-28">↓</text>
							</view>
						</view>
						<view class="rightms">{{ d.ms }}</view>
					</view>
				</view>
			</uni-onlytitlelist>
		</template>
		<template v-else-if="menuact == 1">
			<view class="videobox">
				<view class="imgbox mar-top20"><u--image :mode="'aspectFill'" :src="videoCurImg" width="100vw" height="400rpx"></u--image></view>
				<view class="videocontent  mar-top20">
						
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="2" >
						<view class="item" @click="changeMenu(index, d)" v-for="(d, index) in videoList" :key="d.name">
							<view class="videofm"><u--image :mode="'aspectFill'" :src="d.img" width="116rpx" height="116rpx"></u--image></view>
							<view class="mar-top10">{{ d.name }}</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</template>
		<template v-else="menuact == 2">
			<uni-onlytitlelist :title="'小气象站信息'" :lefticon="kqztIcon">
				<view class="tudbox">
					<view class="item fs-24" v-for="(d, index) in qxzData" :key="d.name">
						<view class="name">{{ d.name }}</view>
						<view class="mar-left20">{{ d.value }}</view>
					</view>
				</view>
			</uni-onlytitlelist>
		</template>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '管理农场',
			data: {
				propellingImg:
					'',
				hotText: '新',
				text: '您有 5条 该地块的待办事宜，请尽快阅读，安排待办事宜'
			},
			menulist: [{ name: '物联监测' }, { name: '实时监控' }, { name: '环境气象' }],
			menuact: 0,
			kqztIcon:
				'',
			tdData: [
				{ name: '地块类型', value: '果园' },
				{ name: '占地面积', value: '253.2亩' },
				{ name: '种植作物', value: '番茄' },
				{ name: '生长期', value: '幼苗期', type: 1 },
				{ name: '农场人员', value: '罗伟(农场主)、罗二娃、罗三娃' },
				{ name: '物联设备', value: '摄像头、喷水头、天气收集站、防火喷头' }
			],
			kqData: [{ name: '湿度', sj: '77.5%', ms: '60%~79.5%' }, { name: '温度', sj: '12.3℃', ms: '10℃~20%' }, { name: '露点', sj: '7.5℃', ms: '5%~10%' }],
			trData: [{ name: '湿度', sj: '77.5%', ms: '60%~79.5%' }, { name: '温度', sj: '12.3℃', ms: '10℃~20%' }, { name: 'HP值', sj: '7.5', ms: '3~15' }],
			qxzData: [
				{ name: '空气温度', value: '33.2℃' },
				{ name: '空气湿度', value: '55.2%' },
				{ name: '光照强度', value: '25.3KL' },
				{ name: '二氧化碳', value: '3202pm' },
				{ name: '风雪', value: '无' },
				{ name: '雨量', value: '2.1mm' },
				{ name: '风速', value: '2.1m/s' },
				{ name: '风向', value: '西北风' }
			],
			videoCurImg:
				'',
			act: 0,
			videoList: [
				{ name: '1号摄像头', img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF' },
				{ name: '2号摄像头', img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF' },
				{ name: '3号摄像头', img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF' },
				{ name: '4号摄像头', img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF' },
				{ name: '5号摄像头', img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF' },
				{ name: '6号摄像头', img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF' },
				{ name: '7号摄像头', img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF' }
			]
		};
	},
	onLoad(d) {
		this.title = d.title;
	},
	methods: {
		mchange(index) {
			this.menuact = index;
		},
		changeMenu(index, d) {
			this.act = index;
			this.videoCurImg = this.videoList[index].img;
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f6f6f6;
	padding-bottom:30rpx;
}
.tudbox {
	display: flex;
	flex-wrap: wrap;
	.item {
		display: flex;
		width: 50%;
		padding: 12rpx 0;
		.name {
			width: 100rpx;
		}
		.type3 {
			color: #13b3ee;
			background: #eaf9ff;
			border: 1px solid #10b9ff;
			border-radius: 8rpx;
			padding: 0 10rpx;
		}
	}
	.w100 {
		width: 100%;
	}
}
.kongqbox {
	// display: flex;
	// flex-wrap: wrap;
	.titlecontent {
		display: flex;
		justify-content: space-between;
		line-height: 56rpx;
		.rightText {
			width: 200rpx;
		}
	}
	.item {
		display: flex;
		justify-content: space-between;
		line-height: 56rpx;
		.leftcontent {
			display: flex;
		}
		.toparrow {
			color: #e93a33;
		}
		.bottomarrow {
			color: #0ec3ff;
		}
	}
	.rightText,
	.rightms {
		width: 200rpx;
	}
}
.videobox {
	.imgbox {
		display: flex;
		justify-content: center;
	}
	.videocontent {
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			.item {
				display: inline-block;
				width: 120rpx;
				text-align: center;
				font-size: 24rpx;
				padding: 0 10rpx;
				.videofm {
					border: 2rpx solid #10c868;
					box-sizing: border-box;
				}
			}
		}
	}
}
</style>
